<template>
  <div class="wrapper">
    <!-- 暂时先走正确流程，之后再加字段校验 -->
    <van-nav-bar title="团队二维码" left-text="返回" left-arrow @click-left="$router.go(-1)" />
    <van-cell-group>
      <van-cell title="推荐码" :value="partnerInfo.code" />
    </van-cell-group>
    <van-cell-group >
      <div style="margin:auto;width: 100%">
        <div style="margin:auto;padding-top:30px;width: 80%" id="qrcode">

        </div>
        <div id="code">
          <canvas id="canvas" ></canvas>
        </div>
      </div>

    </van-cell-group>
  </div>
</template>

<script>
import { NavBar, Cell, CellGroup, Field ,Toast,Checkbox} from 'vant';
import { applyPartner ,parnterInfo} from '@/api/api';
import QRCode from 'qrcode';
export default {
  components: {
    [NavBar.name]: NavBar,
    [Checkbox.name]: Checkbox,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Toast.name]: Toast,
    QRcode:QRCode //注册组件
  },
  props: {},
  data() {
    return {
      applyMustKnow:false,
      partnerInfo: {
        code:'',
        qrCode:''
      }
    };
  },
  watch: {},
  computed: {},
  created() {
    this.getPartnerInfo();
  },
  mounted() {},
  methods: {
    showDetail(){
    },
    getPartnerInfo(){
      var That=this;
      parnterInfo().then(res=>{
        console.log(res.data,"partnerInfo");
        That.partnerInfo.code=res.data.result.umsMemberPartnerInfo.partnerCode;
        That.partnerInfo.qrCode=res.data.result.partnerQrCode;

        var canvas=document.getElementById("canvas"); //获取到canvas
        var code=document.getElementById("code"); //获取到code容器
        QRCode.toCanvas(canvas,That.partnerInfo.qrCode, error=> {
          if (error) console.error(error);
          console.log("success!");
        });
        var image = new Image(); //实例一个img
        image.src = canvas.toDataURL("image/png"); //转换成base64格式路径的png图片
        image.style.width = "100%"; //设置样式
        code.appendChild(image); //添加到code 容器中
        canvas.style.display = "none"; //隐藏掉canvas


        // let qrcode = new QRCode('qrcode', {
        //   width: 152,
        //   height: 152,
        //   text: That.partnerInfo.qrCode, // 二维码地址
        // })
      });
    },
    submitApply(){
      applyPartner(this.form).then(res => {
        Toast.success('申请成功');
        this.$router.go(-1);
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.wrapper {
  padding-bottom: 48px;
}
.fixedBottom {
  position: fixed;
  bottom: 0;
  left: 0;
}
</style>